<template>
  <div class="dashboard-container">
    <div class="index_left">
      <indexCount :home-data="homeData" />
      <!-- 社保部分 -->
      <indexCharts :chart-data="homeData.socialInsurance" />
      <!-- 公积金部分 -->
      <indexCharts :chart-data="homeData.providentFund" />
    </div>
    <div class="index_right">
      <div>
        <!-- 日历插件 -->
        <el-calendar
          v-model="value"
        />
      </div>
      <h1>通知公告</h1>
      <div class="list">
        <div v-for="(item,index) in noticeCom" :key="index" class="list_one">
          <div class="list_top">
            <img :src="item.icon" alt="">
            <p> <span style="font-weight: bold;">{{ item.notice[0] }}</span>  {{ item.notice[1] }}
              {{ item.notice[2] }}</p>
          </div>
          <div class="list_date">{{ item.createTime }}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import indexCount from './child/indexCount.vue'
import indexCharts from './child/indexCharts.vue'
import { getHomeData, getNotice } from '@/api/home'
export default {
  name: 'Dashboard',
  components: {
    indexCount,
    indexCharts
  },
  data() {
    return {
      value: '',
      homeData: {}, // 首页数据
      noticeList: []// 通知列表
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    noticeCom() { // 用计算属性 处理通知公告的数据
      let arr = []
      arr = this.noticeList.map(item => {
        return {
          ...item,
          notice: item.notice.split(' ')
        }
      })
      return arr
    }
  },
  created() {
    this.getIndexData()// 获取首页的数据
    this.getNocList() // 获取通知公告
  },
  methods: {
    async getIndexData() { // 获取首页数据接口
      const res = await getHomeData()
      console.log(res, '----------')
      this.homeData = res.data// 存储数据
    },
    async getNocList() {
      const res = await getNotice()
      console.log(res, '通知公告')
      this.noticeList = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 10px;
    display: flex;
    background: skyblue;
  }
  .index_left{
    width: 1150px;

  }
  .index_right{
    width: 450px;
  }
}
  // 上个月、下个月按钮样式
	::v-deep .el-button-group > .el-button:first-child:before {
		content: '<';
	}
	::v-deep .el-button-group > .el-button:last-child:before {
		content: '>';
	}
	::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
		color: #444444;
	}
  // 去除按钮文字 上个月 和下个月
	::v-deep .el-button-group > .el-button:first-child span,
	::v-deep .el-button-group > .el-button:last-child span {
		display: none;
	}
	::v-deep .el-button-group > .el-button:not(:last-child) {
		margin-right: -15px;
	}
	::v-deep .el-button-group > .el-button:first-child:before,
	::v-deep .el-button-group > .el-button:last-child:before {
		width: 16px;
		height: 16px;
		color: #444444;
	}
    // 去除文字
	::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
		span {
			display: none;
		}
	}

	::v-deep .el-button-group > .el-button {
		border: 0;
		background: transparent;
	}
  ::v-deep .el-calendar-table__row td {
		// 去掉边框
		border: none !important;
		// 缩小高度
		.el-calendar-day {
			height: 32px;
			line-height: 18px;
			// 设置居中
			text-align: center;
		}
	}

    // 自定义选中、悬浮颜色
	// ::v-deep .el-calendar-table .el-calendar-day:hover {
	// 	color: #fff;
	// 	background-color: #ff5e79 !important;
	// }
	// ::v-deep .el-calendar-table .is-today {
	// 	color: #303133;
	// }
  // 日历选中后颜色
	::v-deep .el-calendar-table .is-selected {
		color: #fff;
		background-color: #ff5e79 !important;
	}
	::v-deep .el-calendar__header {
		display: flex;
		justify-content: space-between;
		padding: 0px 20px;
		border: none;
	}
  .list{
    .list_one{
      width: 550px;
      height: 120px;
      // background: pink;
      margin-top: 20px;
      .list_top{
        display: flex;
        align-items: center;
        height: 80px;
        img{
          width: 40px;
          height: 40px;
          margin: 0 20px;
        }
        p{
          margin-left: 20px;
        }

      }
      .list_date{
          color:gray;
          margin-left: 20px;
        }
    }
  }
</style>
